<template class="task-template">
  <section id="abp-cli-account-section" class="section js-section u-category-abp-cli">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
          Abp CLI: <code>login</code> & <code>logout</code>
        </h1>
        <h3>Some features of the CLI requires to be logged in to abp.io platform.</h3>
        <p>See the <a href="https://docs.abp.io/en/abp/latest/CLI#login">ABP framework documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser for more informations.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Login
          <div class="demo-meta u-avoid-clicks">Log you in to Abp.io platform</div>
        </button>
        <div id="box-abp-cli-account-login" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp login &lt;username&gt;</code></pre>

          <div id="account-login-info">
            <h5>Username</h5>
            <input id="account-login-username" class="demo-input" type="text" />
            <h5>Password</h5>
            <input id="account-login-password" class="demo-input" type="password" />
          </div>

          <h5>
            <button class="demo-button" id="account-login-execute">Execute</button>
          </h5>

          <div id="account-login-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Logout
          <div class="demo-meta u-avoid-clicks">Log you in to Abp.io platform</div>
        </button>
        <div id="box-abp-cli-account-logout" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp logout</code></pre>

          <h5>
            <button class="demo-button" id="account-logout-execute">Execute</button>
          </h5>

          <div id="account-logout-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/abp-cli/abp-cli-account-login.js')
      require('./renderer-process/abp-cli/abp-cli-account-logout.js')
    </script>

  </section>
</template>
